<template>
<div class="bg92 pr">
  <Header></Header>
    <!--遮罩弹出层-->
		<div v-show="isSee" class="shadebg" style="background-color:rgba(0,.0,0,0.8);">
			<div class="alertBox" style="margin-top:-50px;">
				<div class="alphaBr">
					<div class="alertWrap bg100 pr f12 w500">
						<h1 class="h36 f14 lh36 c100 bg_grn_119c5b clearfix">
							<span class="ml10">加入圈子</span>
							<img @click="closeAlert" class="fr mr10 mt15 pointer" src="../../../static/images/closeX-white.png" alt="" width="9" height="10" />
						</h1>
						<div class="mt10 clearfix">
							<div class="w100 pt10 pb30 pl20 pr20 bg97 c40 f12 lh150 tc fl">
								<div class="w80 h80 bc b90 bg100">
									<img class="block w60 h60 mt10 ml10" :src="items.userImgUrl" alt="" />
								</div>
								<p class=" fb c30 lh200 f12">{{items.groupName}}</p>
								<dl class="tl mt10">
									<dt>
										<span class="">创建者：</span><i class="c_grn_119c5b">{{items.NickName}}</i>
									</dt>
									<dd class="mt5">
										<span>成员：</span><i class="c60">{{items.userCount}}人</i>
									</dd>
									<dd class="mt5">
										<span>简介：</span>
										<p class="c60">{{items.introduce}}</p>
									</dd>
								</dl>
							</div>
							<!--步骤一-->
							<div v-if="isShow" class="fl w320 pl20 pr20 c40 lh200" >
								<p class="c20">请输入验证信息</p>
								<textarea v-model="message" class="w280 h90 p10 b87 br2 " placeholder="请输入验证信息"  style="resize:none"  name="" rows="" cols=""></textarea>
								<button @click="joinCommunity" class="pointer hoverbg_grn bg97 b87  br2 h20  pl15 pr15 f12">发送</button>
							</div>
							<!--步骤二-->
							<div v-else class="fl w320 pl20 pr20 mt50" >
									<img class="fl w30" src="../../../static/images/sucess-grn.png" width="30" height="32"/>
									<span class="fl w280 lh150 c20 letter1 ml10">您的加入圈子请求已经发送，请等待创建者验证。</span>
							</div>
						</div>
						
					</div>
				</div>
			</div>
		</div>

    <div class="w1200 h300 bc mt20  top-bg-img c100 f12 fm-songti lh200 pr tc vm">
            <div class="inline-block vm">
                <img  class="" :src="items.imgUrl" width="100" height="100"/>
                <h2 class="mt10 fm-yahei f16 fb">{{items.groupName}}</h2>
                <p class="letter1">{{items.introduce}}</p>
                <button @click="openAlert" class="mt20 h28 lh28 pl15 pr15 br2 bg_org_f06113 c100 hoverbg_grn pointer">加入圈子</button>
            </div>
            <div style="display:inline-block;width:0; height:100%;vertical-align:middle;"></div>
			</div>
			<!--top结束-->
			<!--bottomBox-->
			<div class="w1200 bc mt20 bottomBox clearfix">
				<!--左边 圈子详情内容-->
				<div class="bottomLeft w990 fl ">    
					<!--圈子介绍开始-->
					<div class="w948 p20 bg100 fm-yahei f14  c40 letter1" title="圈子介绍">
						<h1 class="bb90 h24 pb10 c20 vm"><i class="orgLine mr10"></i><b class="f14 inline-block vm">圈子介绍</b></h1>
						<p class="pl15 pr15 pt15 pb10 lh24">
							{{items.introduce}}   
						</p>
					</div><!--圈子介绍结束-->
					<!--兴趣点开始-->
					<div class="w948 p20 mt20 bg100 fm-yahei f14 lh150 c40 letter1" title="">
						<h1 class="bb90 h24 pb10 c20 vm"><i class="orgLine mr10"></i><b class="f14 inline-block vm">兴趣点</b></h1>
						<ul class="pl15 pb15 clearfix pointer">
								<li class="fl h30 lh30 f12 c40 b50 br2 pl15 pr15 mr20 mt20 hoverbg_grn">{{items.categoryNames}}</li>
								<!-- <li class="fl h30 lh30 f12 c40 b50 br2 pl15 pr15 mr20 mt20 hoverbg_grn">途乐</li>
								<li class="fl h30 lh30 f12 c40 b50 br2 pl15 pr15 mr20 mt20 hoverbg_grn">BJ40</li>
								<li class="fl h30 lh30 f12 c40 b50 br2 pl15 pr15 mr20 mt20 hoverbg_grn">途乐jfdajkl;j;afd</li>
								<li class="fl h30 lh30 f12 c40 b50 br2 pl15 pr15 mr20 mt20 hoverbg_grn">牧马人</li>
								<li class="fl h30 lh30 f12 c40 b50 br2 pl15 pr15 mr20 mt20 hoverbg_grn">途乐</li> -->
							</ul>
					</div><!--兴趣点结束-->
					<!--车型开始-->
					<div class="w948 p20 mt20 bg100 fm-yahei f14 lh150 c40 letter1" title="">
						<h1 class="bb90 h24 pb10 c20 vm"><i class="orgLine mr10"></i><b class="f14 inline-block vm">车型</b></h1>
						<ul class="pl15 pb15 clearfix pointer">
								<li class="fl h30 lh30 f12 c40 b50 br2 pl15 pr15 mr20 mt20 hoverbg_grn">牧马人</li>
								<li class="fl h30 lh30 f12 c40 b50 br2 pl15 pr15 mr20 mt20 hoverbg_grn">途乐</li>
								<li class="fl h30 lh30 f12 c40 b50 br2 pl15 pr15 mr20 mt20 hoverbg_grn">BJ40</li>
								<li class="fl h30 lh30 f12 c40 b50 br2 pl15 pr15 mr20 mt20 hoverbg_grn">途乐jfdajkl;j;afd</li>
								<li class="fl h30 lh30 f12 c40 b50 br2 pl15 pr15 mr20 mt20 hoverbg_grn">牧马人</li>
								<li class="fl h30 lh30 f12 c40 b50 br2 pl15 pr15 mr20 mt20 hoverbg_grn">途乐</li>
							</ul>
					</div><!--车型结束-->
					<!--圈子成员开始-->
					<div class="w948 p20 mt20 bg100 fm-yahei f14 lh150 c40 letter1" title="">
						<h1 class="bb90 h24 pb10 c20 vm"><i class="orgLine mr10"></i><b class="f14 inline-block vm">圈子成员</b><span class="f12 fm-songti c40 lh24 ml5">({{items.userCount}}人)</span></h1>
						<div class="pl15 pt10 pb40 f12">
							<!--创建者开始-->
							<div>
								<h2 class="fb lh32 h32 c20">创建者</h2>
								<ul class="pointer clearfix ">
									<li class="fl tc pr mr30 ">
										<!--userPicBox开始-->
										<div class="userPicBox pr  w60 h60 bc">
											<img src="images/user-img-100.png" width="60" height="60"/>
											<!--userHoverBox开始-->	
											<!-- <div class="w220 h120 br2 userHoverBox p20 bg_redwhite_fcf8f7 b_org_ff481d tc showList">
												<img class="org-arr-left " src="../../../static/images/org-arr-left.png" width="11" height="14"/>
												<div class="clearfix f12">
													<img class="fl w40 mr10" src="images/user-img-30.png" width="40" height="40"/>
													<dl class="fl tl w170 ">
														<dt class="fb c20 lh20">在路上的阿毛</dt>
														<dd class="">个性签名：我思故我在</dd>
													</dl>
												</div>
												<button  class="mt25 h24 br2 pl15 pr15 f12 c100 bg_grn_119c5b pointer hoverbg_orgred" >加为好友</button>
											</div> -->
                                            <!--userHover结束-->	
										</div>
                                        <!--userPicBox结束-->
										<p class="lh32 tc">在路上的阿毛</p>
									</li>
								</ul>
						    </div><!--创建者结束-->
						    <!--成员开始-->
							<div class="mt20">
								<h2 class="fb lh32 h32 c20">成员</h2>
								<ul class="pointer clearfix ">
									<li v-for="list in lists" class="fl tc pr mr20 ">
										<!--userPicBox开始-->
										<div class="userPicBox pr  w60 h60 bc">
											<img :src="list.imgUrl" width="60" height="60"/>
											<!--userHoverBox开始-->	
											<div v-if="isToggle" class="w220 h120 br2 userHoverBox p20 bg_redwhite_fcf8f7 b_org_ff481d tc">
												<img class="org-arr-left " src="../../../static/images/org-arr-left.png" width="11" height="14"/>
												<div class="clearfix f12">
													<img class="fl w40 mr10" src="images/user-img-30.png" width="40" height="40"/>
													<dl class="fl tl w170 ">
														<dt class="fb c20 lh20">{{list.nickName}}</dt>
														<dd class="">个性签名：我思故我在</dd>
													</dl>
												</div>
												<button  class="mt25 h24 br2 pl15 pr15 f12 c100 bg_grn_119c5b pointer hoverbg_orgred" >加为好友</button>
											</div><!--userHover结束-->
										</div><!--userPicBox结束-->
										<p class="lh32 tc overFlow">{{list.nickName}}</p>
									</li>
								</ul>
						    </div><!--成员结束-->
							
						</div>
					</div><!--圈子结束-->
				</div><!--左边 圈子列表bottomLeft结束-->
				<!--右边热门圈子-->
				<div class="bottomRight fr w190 ">
						<!--热门圈子-->
						<div class="acts fm_songti f12  pb15 bg100 ">
							<h1 class="w h28 lh28 c100 fb tl ti10 bg_org_e0613a">热门圈子</h1>
							<ul class=" pr10 pl10 pb40 f12 pointer">
								<li class="clearfix mt15 bb87 pb10 ">
									<img class="fl w40" src="images/user-img.png" width="40" height="40"/>
									<dl class="fr w120 c40 hoverfont_unl"> 
										<dt class="clearfix"><b class="c40">杭州牧马人</b><span class="c60 fr">2000人</span></dt>
										<dd class="mt10"><p class="c40 lh150">兴趣点：牧马人、途胜</p></dd>
									</dl>
								</li>
								<li class="clearfix mt15 bb87 pb10">
									<img class="fl w40" src="images/user-img.png" width="40" height="40"/>
									<dl class="fr w120 c40 hoverfont_unl"> 
										<dt class="clearfix"><b class="c40">杭州牧马人</b><span class="c60 fr">2000人</span></dt>
										<dd class="mt10"><p class="c40 lh150">兴趣点：牧马人、途胜</p></dd>
									</dl>
								</li>
								<li class="clearfix mt15 bb87 pb10">
									<img class="fl w40" src="images/user-img.png" width="40" height="40"/>
									<dl class="fr w120 c40  hoverfont_unl"> 
										<dt class="clearfix"><b class="c40">杭州牧马人</b><span class="c60 fr">2000人</span></dt>
										<dd class="mt10"><p class="c40 lh150">兴趣点：牧马人、途胜</p></dd>
									</dl>
								</li>
								<li class="clearfix mt15 bb87 pb10">
									<img class="fl w40" src="images/user-img.png" width="40" height="40"/>
									<dl class="fr w120 c40  hoverfont_unl"> 
										<dt class="clearfix"><b class="c40">杭州牧马人</b><span class="c60 fr">2000人</span></dt>
										<dd class="mt10"><p class="c40 lh150">兴趣点：牧马人、途胜</p></dd>
									</dl>
								</li>
								<li class="clearfix mt15 bb87 pb10">
									<img class="fl w40" src="images/user-img.png" width="40" height="40"/>
									<dl class="fr w120 c40  hoverfont_unl"> 
										<dt class="clearfix"><b class="c40">杭州牧马人</b><span class="c60 fr">2000人</span></dt>
										<dd class="mt10"><p class="c40 lh150">兴趣点：牧马人、途胜</p></dd>
									</dl>
								</li>
								<li class="clearfix mt15 bb87  pb10">
									<img class="fl w40 " src="images/user-img.png" width="40" height="40"/>
									<dl class="fr w120 c40  hoverfont_unl"> 
										<dt class="clearfix"><b class="c40">杭州牧马人</b><span class="c60 fr">2000人</span></dt>
										<dd class="mt10"><p class="c40 lh150">兴趣点：牧马人、途胜</p></dd>
									</dl>
								</li>
								
							</ul>
						</div>	<!--热门圈子结束-->
						<!--附近圈子圈子-->
						<div class="acts fm_songti f12  pb15 bg100 mt25 ">
							<h1 class="w h28 lh28 c100 fb tl ti10 bg_pink_e15671 ">附近圈子</h1>
							<ul class=" pr10 pl10 pb40 f12 pointer">
								<li class="clearfix mt15 bb87 pb10 ">
									<img class="fl w40" src="images/user-img.png" width="40" height="40"/>
									<dl class="fr w120 c40 hoverfont_unl"> 
										<dt class="clearfix"><b class="c40">杭州牧马人</b><span class="c60 fr">2000人</span></dt>
										<dd class="mt10"><p class="c40 lh150">兴趣点：牧马人、途胜</p></dd>
									</dl>
								</li>
								<li class="clearfix mt15 bb87 pb10">
									<img class="fl w40" src="images/user-img.png" width="40" height="40"/>
									<dl class="fr w120 c40 hoverfont_unl"> 
										<dt class="clearfix"><b class="c40">杭州牧马人</b><span class="c60 fr">2000人</span></dt>
										<dd class="mt10"><p class="c40 lh150">兴趣点：牧马人、途胜</p></dd>
									</dl>
								</li>
								<li class="clearfix mt15 bb87 pb10">
									<img class="fl w40" src="images/user-img.png" width="40" height="40"/>
									<dl class="fr w120 c40  hoverfont_unl"> 
										<dt class="clearfix"><b class="c40">杭州牧马人</b><span class="c60 fr">2000人</span></dt>
										<dd class="mt10"><p class="c40 lh150">兴趣点：牧马人、途胜</p></dd>
									</dl>
								</li>
								<li class="clearfix mt15 bb87 pb10">
									<img class="fl w40" src="images/user-img.png" width="40" height="40"/>
									<dl class="fr w120 c40  hoverfont_unl"> 
										<dt class="clearfix"><b class="c40">杭州牧马人</b><span class="c60 fr">2000人</span></dt>
										<dd class="mt10"><p class="c40 lh150">兴趣点：牧马人、途胜</p></dd>
									</dl>
								</li>
								<li class="clearfix mt15 bb87 pb10">
									<img class="fl w40" src="images/user-img.png" width="40" height="40"/>
									<dl class="fr w120 c40  hoverfont_unl"> 
										<dt class="clearfix"><b class="c40">杭州牧马人</b><span class="c60 fr">2000人</span></dt>
										<dd class="mt10"><p class="c40 lh150">兴趣点：牧马人、途胜</p></dd>
									</dl>
								</li>
								<li class="clearfix mt15 bb87  pb10">
									<img class="fl w40 " src="images/user-img.png" width="40" height="40"/>
									<dl class="fr w120 c40  hoverfont_unl"> 
										<dt class="clearfix"><b class="c40">杭州牧马人</b><span class="c60 fr">2000人</span></dt>
										<dd class="mt10"><p class="c40 lh150">兴趣点：牧马人、途胜</p></dd>
									</dl>
								</li>
								
							</ul>
						</div>	<!--热门圈子结束-->
				</div><!--bottomRight结束-->
			</div>
			<!--列表主体 bottomBox结束-->




  <Footer></Footer>
  <!-- <Login></Login>   -->
</div>
</template>
<script>
import Header from '../../components/header'
import Footer from '../../components/footer'
import axios from '../../../config/http'
export default {
  components: {
    Header,
    Footer
  },
  data () {
    return {
        isSee:false,
        items:[],
        message:'',
        isShow:true,
        lists:[],
		isToggle:false,
		groupIDExtend: this.$route.query.groupIDExtend
    }
  },
  mounted(){
	  window.scrollTo(0,0)
	  this.getAxios()
  },
  methods: {
      //页面加载调用数据
    getAxios: function(){
        axios.post("/Group/GetDetails",{	
        "groupIDExtend": this.groupIDExtend,
        "userNameExtend": 0 
        }).then(res=>{
            let items = res.data.data
            this.items = items
            console.log(console.log(this.$route.query.groupIDExtend))
        })
        //圈子成员
        axios.post("/Group/GetGroupUser",{
            "groupIDExtend": this.groupIDExtend,
            "keyword": "",
            "userID": "0"
        }).then(res=>{
			this.lists = res.data.data 
        })
    },
    closeAlert(){
        this.isSee = false
    },
    openAlert(){
        this.isSee = true
    },
    //会有闪烁出现
    // toggleShow() {
    //   this.isToggle = !this.isToggle
    // },
    //加入圈子
    joinCommunity(){
        if(this.message==""){

        }else{
            axios.post("/Group/GroupApply",{	
                "userID": 21,
                "groupID": 33,
                "groupIDExtend": "459594765",
                "validateInfo":this.message,
                "token":""
                }).then(res=>{
                    this.isShow = false
                console.log(this.message)
            })
        }
        
    }
  }
}
</script>
<style lang="less" scoped>
.bg_org_f06113{
    background:#f06113
}
.overFlow{
    width:60px;
    margin-left:20px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
// .showList{

// }
</style>
